<template>
  <div class="bigBox">
    <div class="goodesmodelbox">
      <el-dialog
        :showClose="false"
        title="统计信息"
        :visible.sync="centerDialogVisible"
        height="100%"
        top
        width="100%"
        :fullscreen="true"
      >
        <div class="topSearch">
          <div class="topSearchLeft">
            <div>
              <p>商品名称:</p>
              <el-input
                v-model="goodsName"
                :style="{ width: '260px', marginLeft: '20px' }"
                placeholder="商品名称"
                clearable
                @clear="clearHandle"
              ></el-input>
            </div>
            <div>
              <p>店铺名称:</p>
              <el-input
                v-model="mallName"
                :style="{ width: '260px', marginLeft: '20px' }"
                placeholder="店铺名称"
                clearable
                @clear="clearHandle"
              ></el-input>
            </div>
          </div>
          <div class="topSearchRight">
            <el-button
              type="primary"
              :style="{ marginLeft: '20px' }"
              @click="handleSearch"
            >
              查询
            </el-button>
            <el-button :style="{ marginLeft: '20px' }" @click="chongzhi">
              重置
            </el-button>
          </div>
        </div>
        <!--<div>
           <el-input
            v-model="goodsName"
            :style="{ width: '260px', marginLeft: '20px' }"
            placeholder="商品名称"
            clearable
            @clear="clearHandle"
          ></el-input>
          <el-input
            v-model="mallName"
            :style="{ width: '260px', marginLeft: '20px' }"
            placeholder="店铺名称"
            clearable
            @clear="clearHandle"
          ></el-input> 
          <el-button
            :style="{ marginLeft: '20px' }"
            circle
            icon="el-icon-search"
            @click="handleSearch"
          ></el-button>
        </div>-->
        <div class="tableBox">
          <div class="topButton">
            <div class="topButtonLeft">
              <el-button @click="cancelgoodesmodel">取 消</el-button>
              <!-- <el-button type="primary" @click="saveActiveHandle">确 定</el-button> -->
            </div>
            <div class="topButtonRight">
              <el-button
                circle
                icon="el-icon-refresh-right"
                @click="RefreshHandle"
              >
              </el-button>
            </div>
            <!-- <div>当前表格已选择{{ this.selectedRows.length }}项</div> -->
            <!-- <el-button class="shuxin" round size="mini" @click="RefreshHandle"
            >刷新
          </el-button> -->
          </div>
          <!-- <div class="choosediv">
            <el-button class="shuxin" round size="mini" @click="RefreshHandle"
              >刷新
            </el-button>
          </div> -->
          <el-table
            v-loading="loading"
            :cell-style="{ 'text-align': 'center' }"
            :data="goodsList"
            :header-cell-style="{ 'text-align': 'center' }"
            border
            style="width: 100%"
          >
            <el-table-column fixed label="排序" prop="sort" width="70">
              <template slot-scope="scope">
                <div class="flex-container">
                  <span class="flex-item">
                    <!-- 序号 -->
                    {{ scope.$index + 1 }}
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="goodsName">
            </el-table-column>
            <el-table-column label="店铺名称" prop="mallName">
              <template slot-scope="scope">
                {{ scope.row.mallName ? scope.row.mallName : "未知" }}
              </template>
            </el-table-column>
            <el-table-column label="商品下单数量" prop="goodsNum">
            </el-table-column>
            <el-table-column label="商品下单金额/元" prop="orderAmount">
              <template slot-scope="scope">
                {{ scope.row.orderAmount / 100 }}
              </template>
            </el-table-column>
            <el-table-column label="商品付款金额/元" prop="payAmount">
              <template slot-scope="scope">
                {{ scope.row.payAmount / 100 }}
              </template>
            </el-table-column>
            <el-table-column label="商品退款数量" prop="refundNum">
              <template slot-scope="scope">
                {{ scope.row.refundNum ? scope.row.refundNum : "0" }}
              </template>
            </el-table-column>
            <el-table-column label="商品退款金额/元" prop="refundAmount">
              <template slot-scope="scope">
                {{ scope.row.refundAmount / 100 }}
              </template>
            </el-table-column>
          </el-table>
          <!-- <div class="paging">
            <el-pagination
              :current-page.sync="currentPage"
              :page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 30, 40]"
              layout="sizes,total, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div> -->
          <div class="paging">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="cancelgoodesmodel">取 消</el-button>
        </span> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { StatisticInfo } from "@/api/mallApi/managementend/marketing";

export default {
  name: "Statistic",
  components: {},
  props: {
    centerDialogVisible: Boolean,
    currentRow: Object,
    enterType: Number,
    cancelSubmit: Number,
  },
  data() {
    return {
      goodsName: "",
      loading: false,
      goodsList: [],
      currentPage: 1, // 分页
      total: 0,
      pageSize: 10,
      centerDialogVisible2: false,
      enterType2: 0,
      mallName: "",
    };
  },
  methods: {
    chongzhi() {
      this.goodsName = null;
      this.mallName = null;
      this.RefreshHandle();
    },
    cancelgoodesmodel2() {
      this.enterType2 = 0;
      this.centerDialogVisible2 = false;
    },
    clearHandle() {
      this.getGoodsListHandle();
    },
    RefreshHandle() {
      this.getGoodsListHandle();
    },
    handleSearch() {
      this.currentPage = 1;
      this.getGoodsListHandle();
    },
    saveActiveHandle() {},
    cancelgoodesmodel() {
      this.$emit("cancelgoodesmodel", false);
    }, // 取消按钮 传值
    getGoodsListHandle() {
      this.loading = true;
      const params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        activeId: this.currentRow.id,
        goodsName: this.goodsName,
        mallName: this.mallName,
      };
      StatisticInfo(params)
        .then((res) => {
          if (res.code !== "00000") return;
          this.goodsList = res.data.rows;
          this.total = parseInt(res.data.totalRows);
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
        });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getGoodsListHandle();
    },
    handleCurrentChange(val) {
      // 分页
      this.currentPage = val;
      this.getGoodsListHandle();
    },
  },
  mounted() {},
  created() {
    this.getGoodsListHandle();
    // console.log(this.currentRow);
  },
  watch: {
    centerDialogVisible(newVal) {
      // 监听 centerDialogVisible 的变化
      if (!newVal) {
        // 当 centerDialogVisible 变为 false 时触发事件
        this.$emit("close-dialog");
      }
    },
  },
};
</script>

<style lang="scss">
// .goodesmodelbox {
//   .choosediv {
//     display: flex;
//     align-items: center;
//     width: 100%;
//     position: relative;
//     margin-bottom: 20px;
//     > div:nth-child(1) {
//       width: 1200px;
//       font-size: 16px;
//       margin-left: 20px;
//       margin-bottom: 10px;
//       margin-top: 10px;
//       background-color: #ecf5ff;
//       border-color: #d9ecff;
//       display: inline-block;
//       height: 32px;
//       padding: 0 10px;
//       line-height: 30px;
//       color: #409eff;
//       border-width: 1px;
//       border-style: solid;
//       border-radius: 4px;
//       box-sizing: border-box;
//       white-space: nowrap;
//       letter-spacing: 10px;
//     }
//     .shuxin {
//       position: absolute;
//       right: 20px;
//     }
//   }
//   .paging {
//     width: 100%;
//     height: 50px;
//     // background-color: antiquewhite;
//     display: flex;
//     align-items: center;
//     justify-content: space-around;
//   }
// }
.goodesmodelbox {
  .topSearch {
    width: 98%;
    margin: 1%;
    min-height: 80px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    .topSearchLeft {
      width: 1150px;
      display: flex;
      margin-left: 10px;
      > div {
        display: flex;
        align-items: center;
        p {
          font-size: 14px;
        }
        margin-left: 10px;
      }
    }
    .topSearchRight {
      width: 15%;
      height: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .topButton {
    width: 100%;
    min-height: 65px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .topButtonLeft {
      margin-top: 10px;
      margin-left: 5px;
    }
    .topButtonRight {
      margin-top: 10px;
      margin-right: 30px;
    }
    // position: relative;

    // > div:nth-child(1) {
    //   width: 1200px;
    //   font-size: 16px;
    //   margin-left: 20px;
    //   margin-bottom: 10px;
    //   margin-top: 10px;
    //   background-color: #ecf5ff;
    //   border-color: #d9ecff;
    //   display: inline-block;
    //   height: 32px;
    //   padding: 0 10px;
    //   line-height: 30px;
    //   color: #409eff;
    //   border-width: 1px;
    //   border-style: solid;
    //   border-radius: 4px;
    //   box-sizing: border-box;
    //   white-space: nowrap;
    //   letter-spacing: 5px;
    // }
    // .shuxin {
    //   position: absolute;
    //   right: 20px;
    // }
  }
  .tableBox {
    width: 100%;
    min-height: 750px;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 1%;
    background: #fff;
    .divBox {
      width: 98%;
      margin-left: 1%;
      margin-bottom: 15px;
      border: 1px solid #dcdee2;
    }
    .paging {
      width: 99%;
      height: 50px;
      margin-bottom: 15px;
      // background-color: antiquewhite;
      display: flex;
      align-items: end;
      justify-content: end;
    }
  }
}
</style>
